<template>
  <div class="c-editor-info-bar__container">
    <a-flex justify="center" align="center">
      <LeftOutlined
        class="c-editor-info-bar__button-icon"
        @click="backToWorkbench"
      />
      <cola-logo width="28" height="28" />
      <div
        v-if="!changeNameFlag"
        @click="updateName"
        ref="fileName"
        class="c-editor-info-bar__file-name"
      >
        {{ boardInfo.name }}
      </div>
      <a-input
        v-else
        ref="fileNameInput"
        v-model:value="boardInfo.name"
        :style="{ width: `${inputWidth + 5}px` }"
        :bordered="false"
        @blur="changeFileName"
      ></a-input>
      <a-tooltip :title="saveTime">
        <LoadingOutlined
          v-if="saveLoading"
          class="c-editor-info-bar__save-tip-icon"
        />
        <CheckCircleOutlined v-else class="c-editor-info-bar__save-tip-icon" />
      </a-tooltip>
      <div class="c-editor-info-bar__dropdown">
        <DownloadOutlined
          class="c-editor-info-bar__button-icon"
          @click="openExportVisible"
        />
        <div v-if="exportVisible" class="c-editor-info-bar__dropdown-content">
          <div
            class="c-editor-info-bar__dropdown-content-item"
            @click="exportCanvas('png')"
          >
            导出为PNG
          </div>
          <div
            class="c-editor-info-bar__dropdown-content-item"
            @click="exportCanvas('svg')"
          >
            导出为SVG
          </div>
          <div
            class="c-editor-info-bar__dropdown-content-item"
            @click="exportCanvas('json')"
          >
            导出为JSON
          </div>
        </div>
      </div>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import {
  LeftOutlined,
  CheckCircleOutlined,
  DownloadOutlined,
  LoadingOutlined,
} from '@ant-design/icons-vue';
import colaLogo from '@/components/icon/colaLogo.vue';
import { inject, onMounted, reactive, ref, watchEffect } from 'vue';
import { IEditor } from '@/types/global';
import { useRouter } from 'vue-router';
import { useBoardStore } from '@/store';
import { BoardSyncEvent } from '@/utils/Const.ts';
import { formatDateTime } from '@/utils/Filter.ts';

const boardStore = useBoardStore();
const router = useRouter();
// 白板编辑器对象，操作画布
const canvasEditor: unknown | IEditor = inject('canvasEditor');

const boardInfo = reactive({
  name: '',
  myRole: -1,
});
const changeNameFlag = ref(false);
const fileName = ref(null);
const fileNameInput = ref(null);
const inputWidth = ref(90);
const saveTime = ref('');

let oldName = '';
function updateName() {
  if (boardInfo.myRole === 2) return;
  changeNameFlag.value = true;
  oldName = boardInfo.name;
}
async function changeFileName() {
  changeNameFlag.value = false;
  if (oldName !== boardInfo.name) {
    await boardStore.renameBoard(boardStore.currentBoardId, boardInfo.name);
  }
}

watchEffect(() => {
  if (fileName.value) {
    if (!fileName.value.offsetWidth) return;
    inputWidth.value = fileName.value.offsetWidth;
  }
  if (fileNameInput.value) {
    fileNameInput.value.focus();
  }
});
onMounted(() => {
  // 获取白板名字
  canvasEditor?.on(BoardSyncEvent.type0, (data: any) => {
    boardInfo.name = data.name;
    document.title = data.name;
  });
  // 获取白板协作列表
  canvasEditor?.on(BoardSyncEvent.type2, (data: any) => {
    boardInfo.myRole = data.myRole;
  });
  // 监听白板实时保存时间
  canvasEditor?.on(BoardSyncEvent.saveTime, () => {
    saveTime.value = `保存时间：${formatDateTime()}`;
  });
});
// 正在保存
const saveLoading = ref(false);

// 导出 数据 start
const exportVisible = ref(false);
function openExportVisible() {
  exportVisible.value = !exportVisible.value;
}

function exportCanvas(type: string) {
  switch (type) {
    case 'png':
      canvasEditor.exportToPNG(boardInfo.name);
      break;
    case 'svg':
      canvasEditor.exportToSVG(boardInfo.name);
      break;
    case 'json':
      canvasEditor.exportToJSON(boardInfo.name);
      break;
  }
  exportVisible.value = false;
}
// 导出 数据 end

// 返回工作台
function backToWorkbench() {
  // canvasEditor.disconnectWebSocket();
  router.push({ path: '/workbench' });
}
</script>

<style scoped lang="scss">
.c-editor-info-bar__container {
  position: fixed;
  top: 15px;
  left: 15px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  padding: 5px;
  .c-editor-info-bar__button-icon {
    cursor: pointer;
    font-size: 18px;
    color: rgb(88, 97, 119);
    padding: 8px;
    user-select: none;
    &:hover {
      background: rgba(185, 185, 185, 0.2);
    }
  }
  .c-editor-info-bar__save-tip-icon {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.25);
    font-size: 16px;
    padding: 2px;
    margin: 5px;
  }
  .c-editor-info-bar__file-name {
    padding: 0 8px;
  }
  .c-editor-info-bar__dropdown {
    position: relative;
    display: inline-block;
    .c-editor-info-bar__dropdown-content {
      position: absolute;
      top: 45px;
      left: 50%;
      padding: 3px;
      border-radius: 5px;
      transform: translateX(-50%);
      background-color: #fff;
      box-shadow: 0 -3px 12px 0 rgba(0, 0, 0, 0.1);
      z-index: 999;
      .c-editor-info-bar__dropdown-content-item {
        width: 6rem;
        height: 2rem;
        font-size: 14px;
        text-align: center;
        line-height: 2rem;
        color: rgb(88, 97, 119);
        &:hover {
          background: rgba(185, 185, 185, 0.2);
          cursor: pointer;
        }
      }
      .dropdown-item-click {
        font-weight: bold;
        background: rgba(16, 142, 233, 0.1);
      }
    }
  }
}
</style>
